<template>
    <ul class="productList banxin tanxin">
      <li v-for="item in AllInfo" @click="gotoDta(item.id)">
        <div class="productList_box">
          <img class="proImg" :src="'http://sc.wolfcode.cn' + item.coverImg" alt="" />
          <h3>{{ item.name }}</h3>
          <section>
            <span>{{ item.coin }}</span>
            <img src="../assets/images/home/monad.png" alt="" />
          </section>
          <div class="btn">立即兑换</div>
          <img class="img_p" src="../assets/images/home/hot-j.png" alt="" v-show="item.isHotSale===1"/>
          <img class="img_p" src="../assets/images/home/new-j.png" alt=""  v-show="item.isLatest===1"/>
        </div>
      </li>
    </ul>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
    props:['AllInfo'],
    methods: {
        gotoDta(id) {
            // console.log(123);
            // 跳转到对应详情页
            this.$router.push(`/deatils?id=${id}`)
        }
    },
  };
  </script>
   
  <style lang = "less" scoped>
  @import "../assets/base.less";
  
  .productList {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    li {
      width: 285px;
      text-align: center;
      margin-bottom: 30px;
      margin-right: 20px;
      &:last-of-type{
            margin-right: 0;
        }
        &:nth-of-type(4n){
            margin-right: 0;
        }
      &:hover {
        .productList_box {
          transform: translateY(-20px);
          .btn {
            color: #fff;
            background: @blue;
          }
        }
      }
      .productList_box {
        transition: all 0.5s linear;
        position: relative;
        background: #fff;
        padding-bottom: 32px;
        .proImg {
          width: 285px;
          height: 250px;
        }
        h3 {
          font-size: 18px;
          font-weight: 300;
          color: #333333;
          margin-top: 22px;
          margin-bottom: 16px;
        }
        section {
          margin-bottom: 20px;
          font-size: 18px;
          font-weight: bold;
          color: @orange;
          img {
            width: 20px;
            height: 20px;
          }
        }
        .btn {
          width: 100px;
          height: 36px;
          border: 1px solid @blue;
          line-height: 36px;
          color: @blue;
          cursor: pointer;
          margin: auto;
          
        }
        .img_p {
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }
  </style>